<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @submit="handleSearch" :autoFormCreate="(form)=>{this.searchForm = form}">
        <a-row :gutter="12">
          <a-col :md="6" :sm="12">
            <a-form-item label="产品名称" fieldDecoratorId="name">
              <a-input placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="12">
            <a-form-item label="类别" fieldDecoratorId="category_id">
              <a-select placeholder="请选择">
                <a-select-option v-for="item in categories" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <a-form-item label="状态" fieldDecoratorId="status">
              <a-select placeholder="请选择">
                <a-select-option :value="1">上架</a-select-option>
                <a-select-option :value="0">下架</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <a-form-item label="推荐" fieldDecoratorId="recommended">
              <a-select placeholder="请选择">
                <a-select-option :value="1">推荐</a-select-option>
                <a-select-option :value="0">不推荐</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="12">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" htmlType='submit'>查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd" icon="plus">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="middle"
      :columns="columns"
      :data="loadData"
      @change="handleTableChange"
    >
      <template slot="image_url" slot-scope="text">
        <span><img :src="text" style="width: 125px; height: 60px;"></span>
      </template>
      <template slot="is_online" slot-scope="text">
        {{ text ? '是' : '否' }}
      </template>
      <template slot="is_listing" slot-scope="text">
        {{ text ? '上架' : '未上架' }}
      </template>
      <template slot="recommended" slot-scope="text">
        <template v-if="text">
          <a-tag color="red">推荐</a-tag>
        </template>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="record.is_listing" @click="handleListing(record, false)">下架</a>
        <a v-else @click="handleListing(record, true)">上架</a>
        <a-divider type="vertical" />
        <a v-if="record.recommended" @click="handleRecommend(record, false)">取消推荐</a>
        <a v-else @click="handleRecommend(record, true)">推荐</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定要删除此商品吗？" okText="是" cancelText="否">
          <a @click="handleDelete(record)">删除</a>
        </a-popconfirm>
        
      </span>
    </s-table>
  </a-card>
</template>
<script>
import STable from '@/components/table/'
import { getGoodsList, updateGoods, deleteGoods } from '@/api/goods'
import { getCategoryList } from '@/api/category'
import router from '@/router'

export default {
  name: 'GoodsList',
  components: {
    STable
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      categories: [],
      form: null,
      mdl: {},
      // 查询参数
      searchForm: null,
      queryParam: {},
      // 表头
      columns: [
        {
          title: 'SKU',
          dataIndex: 'sku'
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '品牌',
          dataIndex: 'brand.name'
        },
        {
          title: '类别',
          dataIndex: 'category.name'
        },
        {
          title: '娃娃个数',
          dataIndex: 'exchange_price'
        },
        {
          title: '权重',
          dataIndex: 'weights'
        },
        {
          title: '线上兑换',
          dataIndex: 'is_online',
          scopedSlots: { customRender: 'is_online' },
        },
        {
          title: '推荐',
          dataIndex: 'recommended',
          scopedSlots: { customRender: 'recommended' }
        },
        {
          title: '状态',
          dataIndex: 'is_listing',
          scopedSlots: { customRender: 'is_listing' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        return getGoodsList(Object.assign(params, this.queryParam))
          .then(res => {
            return res.data
          })
      },
    }
  },
  created () {
    this.getCategoryList()
  },
  methods: {
    getCategoryList: function () {
      getCategoryList().then(res => {
        this.categories = res.data.data
      })
    },
    handleSearch(e) {
      e.preventDefault()
      this.queryParam = {
        filter: {
          name: this.searchForm.getFieldValue('name'),
          category_id: this.searchForm.getFieldValue('category_id'),
          is_listing: this.searchForm.getFieldValue('status'),
          recommended: this.searchForm.getFieldValue('recommended'),
        }
      }
      this.$refs.table.refresh()
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(sorter);
    },
    handleReset() {
      this.searchForm.resetFields()
      this.queryParam = {}
      this.$refs.table.refresh()
    },
    handleAdd() {
      router.push({name: 'AddGoods'})
    },
    handleEdit(row) {
      router.push({name: 'EditGoods', params: {id: row.id}})
    },
    handleListing(row, status) {
      const params = {
        is_listing: status
      }
      updateGoods(row.id, params).then(res => {
        if (res.code === 0) {
          this.$refs.table.refresh()
          this.$message.success('操作成功')
        }
      })
    },
    handleRecommend(row, status) {
      const params = {
        recommended: status
      }
      updateGoods(row.id, params).then(res => {
        if (res.code === 0) {
          this.$refs.table.refresh()
          this.$message.success('操作成功')
        }
      })
    },
    handleDelete (row) {
      deleteGoods(row.id).then(res => {
        if (res.code === 0) {
          this.$refs.table.refresh()
          this.$message.success('删除成功')
        }
      })
    }
  }
}
</script>
